<template>
  <div id="city" class="weathercity-main">
    <div class="weather-title">气象局地区</div>
    <div v-if="ischange" class="weather-sel-all">
      <select v-model="selectClassShenEnd" class="weather-select" @change="selectClassShen($event)">
        <option class="weather-value" value="NONE">未选择</option>
        <option v-for="(options1, id) in objShen" :key="id" class="weather-value" :value="options1.name"> {{ options1.name }}</option>
      </select>
      <select v-model="selectClassShiEnd" class="weather-select" @change="selectClassShi($event)">
        <option class="weather-value" value="NONE">未选择</option>
        <option v-for="(options2, id) in objShi" :key="id" class="weather-value" :value="options2.name"> {{ options2.name }}</option>
      </select>
      <select v-model="selectClassQuEnd" class="weather-select" @change="selectClassQu($event)">
        <option class="weather-value" value="NONE">未选择</option>
        <option v-for="(options3, id) in objQu" :key="id" class="weather-value" :value="options3.name"> {{ options3.name }}</option>
      </select>
    </div>
    <div v-if="!ischange" class="weather-showview">
      {{ selectClassShenEnd }}- {{ selectClassShiEnd }}-{{ selectClassQuEnd }}
    </div>
    <div class="weather-button" @click="weatherclickbut">
      <div v-if="!ischange">
        重新选择
      </div>
      <div v-if="ischange">
        确认
      </div>
    </div>
  </div>
</template>

<script>
import zhreq from '@/api/index.js'
import CityTest from './CitysInfo.json'
export default {
  name: 'City3',
  data: function () {
    return {
      // 当前是否可修改
      ischange: false,
      nowselcode: '101210201',
      // 类别默认选择
      // selectClassShenEnd:
      //   'NONE',
      // selectClassShiEnd:
      //   'NONE',
      // selectClassQuEnd:
      //   'NONE',
      selectClassShenEnd: '浙江',
      selectClassShiEnd: '湖州',
      selectClassQuEnd: '湖州',
      objShen: [],
      objShi: [],
      objQu: [],
      objs: []
    }
  },
  created () {
    let cityData = JSON.stringify(CityTest)
    this.objs = JSON.parse(cityData)
    for (const s in this.objs) {
      let shen = { name: s }
      this.objShen.push(shen)
    }
  },
  mounted() {
    this.getweathmessage()
  },
  methods: {
    // 按钮点击相关方法
    weatherclickbut() {
      this.ischange = !this.ischange
      if (this.ischange === true) {
        this.selectClassShenEnd = 'NONE'
        this.selectClassShiEnd = 'NONE'
        this.selectClassQuEnd = 'NONE'
      }
      if (this.ischange === false) {
        // 查询信息，并向父组件传输
        this.getweathmessage()
      }
    },
    // ---
    selectClassShen (event) {
      let value = event.target.value
      this.objShi = []
      for (const i in this.objs[value]) {
        let shi = { name: i }
        this.objShi.push(shi)
      }
    },
    selectClassShi (event) {
      let shenName = this.selectClassShenEnd
      let value = event.target.value
      this.objQu = []
      for (const q in this.objs[shenName][value]) {
        let qu = { name: q }
        this.objQu.push(qu)
      }
    },
    selectClassQu (event) {
      let shenName = this.selectClassShenEnd
      let shiName = this.selectClassShiEnd
      let value = event.target.value
      console.log('qu name is ', this.objs[shenName][shiName][value]['nameCN'])
      console.log('qu DZ is ', this.objs[shenName][shiName][value]['areaId'])
      this.nowselcode = this.objs[shenName][shiName][value]['areaId']
      // console.log(this.nowselcode);
      // this.getweathmessage()
    },
    // 获取地区信息
    async getweathmessage () {
      let shijian = Date.parse(new Date())
      console.log(shijian)
      console.log(this.nowselcode)
      let weatherres = await zhreq.get(`organizationManage/cityWeather/getWeatherWD/${this.nowselcode}`)
      this.$emit('weathermesage', weatherres)
      // 101210201 浙江湖州
      // let url = "http://d1.weather.com.cn/dingzhi/" + this.nowselcode + ".html?_=" + shijian;
      // let url2 = "/zhapione/weather/" + this.nowselcode + ".shtml"
      // console.log(url)
      // axios({
      //   headers: {
      //     'Access-Control-Allow-Origin': '*',
      //     'Host': "d1.weather.com.cn",
      //     'Referer': url2
      //   },
      //   method: 'get',
      //   url: url
      // }).then(
      //   res => {
      //     console.log(res)
      //   }
      // )
    }
  }
}
</script>

<style lang="scss" scoped>
.weathercity-main{
  width: 500px;
  // border: 4px solid rgb(180, 12, 12);
  height: 30px;
  display: flex;
  align-items: center;
}
.weather-title{
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.weather-sel-all{
  width: 300px;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.weather-select{
  min-width: 90px;
  height: 30px;
  line-height: 30px;
  background-color: transparent;
  outline: none;
  color: azure;
  background-color: transparent;
  margin-right: 5px;
  text-align: center;
  border-color: #a3b5ba;
  .weather-value{
    text-align: center;
    border: 1px solid #23fff8;
    background-color: #005d7b;
  }
}
.weather-button{
  width: 100px;
  height: 30px;
  border: 1px #fff solid;
  cursor: pointer;
  white-space: nowrap;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: #005dab;
  margin-left: 5px;
}
</style>
